<template>
  <div class="Domestic-record">
    <!-- 导航栏头部 -->
    <van-tabs v-model="activeName">
      <van-tab title="聊天"
               name="a">
        <!-- closeable 模式，在右侧显示关闭按钮 -->
        <van-notice-bar mode="closeable"
                        left-icon="volume-o">
          开启微信通知，重要消息再也不错过！
        </van-notice-bar>
        <!-- cell单元 -->
        <van-tabs v-model="active">
          <!-- 全部 -->
          <van-tab title="全部">
            <van-cell title="">
              <div class="All_text">
                <div class="All_text_left"><img src="@/assets/添加.png"
                       alt=""></div>
                <div class="All_text_middle">
                  <div style="text-align : left">湖南金管家政更新了月嫂</div>
                  <div style="text-align : left">36家家政公司新发布</div>
                </div>
                <div class="All_text_right"><span class="widthspan">14:36</span></div>
              </div>
            </van-cell>
            <van-cell title="">
              <div class="All_text">
                <div class="All_text_left"><img src="@/assets/通知.png"
                       alt=""></div>
                <div class="All_text_middle">
                  <div style="text-align : left">通知<span>系统通知</span></div>
                  <div style="text-align : left">隐私政策已更新</div>
                </div>
                <div class="All_text_right"><span class="widthspan">10月2日</span></div>
              </div>
            </van-cell>
            <van-cell title="">
              <div class="All_text">
                <div class="All_text_left"><img src="@/assets/家政服务.png"
                       alt=""></div>
                <div class="All_text_middle">
                  <div style="text-align : left">每日新发现</div>
                  <div style="text-align : left"></div>
                </div>
                <div class="All_text_right"><span class="widthspan">10月1日</span></div>
              </div>
            </van-cell>
            <h4 class="lianxi">以上是30天内的联系人</h4>
          </van-tab>
          <van-tab title="招呼">
            <div class="sition">
              <div class="converimg">
                <img src="@/assets/kong.png"
                     alt="">
              </div>
              <div class="conversition">
                暂无进行中的对话
              </div>
            </div>
          </van-tab>
          <van-tab title="沟通中">
            <div class="sition">
              <div class="converimg">
                <img src="@/assets/kong.png"
                     alt="">
              </div>
              <div class="conversition">
                暂无进行中的对话
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
      <van-tab title="互动"
               name="b">
        <mapChart />
      </van-tab>
      <!-- <span class="righticon">美女
        <i slot="right-icon"
           :slot-scope="lefticon"
           style="color:yellow"
           class="jiazheng icon-lingdang"></i>
      </span> -->
      <span class="www">
        <i slot="right-icon"
           :slot-scope="lefticon"
           class="jiazheng icon-shanchu"
           @click="$router.push('/my')"></i>
      </span>
    </van-tabs>
  </div>
</template>

<script>
import mapChart from './components/mapchart'
export default {
  name: 'DomesticRecord',
  props: {},
  components: {
    mapChart
  },
  data () {
    return {
      activeName: 'a',
      lefticon: '',
      active: ''
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {

  },
  computed: {

  }
}
</script>

<style scoped lang="less">
.Domestic-record {
  position: relative;
}
/deep/ .nav {
  background-color: #1196db !important;
}
/deep/ .van-tabs__wrap {
  height: 116px;
}
/deep/ .van-tab {
  // background-color: #1196db;
  font-size: 30px;
  flex: unset;
  position: unset;
  &:nth-child(1) {
    margin-left: 50px;
  }
  &:nth-child(2) {
    margin-left: 50px;
  }
  &:nth-child(3) {
    margin-left: 50px;
  }
}
.van-cell {
  &:nth-child(1) {
    border-top: 1px solid #f4f4f4;
  }
}
.righticon {
  position: absolute;
  top: 12%;
  left: 88%;
  height: 48px;
  width: 48px;
}
.jiazheng {
  font-size: 40px;
}
.All_text {
  height: 150px;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  align-items: center;
  .All_text_left {
    height: 90px;
    width: 90px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  /deep/ .All_text_middle {
    div {
      margin-left: 20px;
      padding: 5px;
      /deep/ &:nth-child(1) {
        font-size: 32px;
        color: #b4b4b4;
        height: 60px;
        width: 420px;
      }
      /deep/ &:nth-child(2) {
        font-size: 24px;
        color: #d7d7d7;
      }
    }
  }
  .All_text_right {
    position: absolute;
    top: 14%;
    left: 85%;
  }
}
.van-cell__title {
  display: none;
}
.www {
  top: 1%;
  left: 91%;
  height: 60px;
  width: 60px;
  position: fixed;
}
.widthspan {
  display: inline-block;
  white-space: nowrap;
  width: 90px;
}
.xxoo {
  height: 200px;
  width: 200px;
  background: linear-gradient(30deg, #96deda, #350c9c);
}
/deep/ .lianxi {
  background-color: #f5f7f9;
  border: 0 !important;
  text-align: center;
  font-size: 12px;
  color: #c3c3c3;
}
.sition {
  position: relative;
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  .converimg {
    position: absolute;
    top: 35%;
    left: 45%;
    img {
      height: 80px;
      width: 80px;
    }
  }
  .conversition {
    color: #c3c3c3;
    font-size: 14px;
  }
}
</style>
